<template>
  <div>
    <el-form ref="unitFormRef"
      :model="form"
      :rules="rules"
      label-width="130px">
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="所属区划">
            <el-input v-model="defaultParams.name"
              disabled
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主管部门"
            prop="supdep">
            <RkTreeSelect style="width: 100%;"
              :filterable="false"
              placeholder="请选择主管部门"
              v-model="form.supdep"
              v-model:label="form.zgbmName"
              :dist="{
                name: 'DSY_V_ELE_ZGBM'}"
              :disabled="controlZgbm">
            </RkTreeSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="单位编码"
            class="base-type-item">
            <el-input v-model="defaultParams.agCode"
              prop=""
              disabled
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" "
            prop="code"
            :colon="false"
            v-show="!isEdit">
            <el-input v-show="!isEdit"
              v-model="form.code"
              :disabled="codeState"
              placeholder="请输入单位编码"
              clearable />
            <el-input v-show="isEdit"
              disabled
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="单位名称"
            prop="name">
            <el-input v-model="form.name"
              placeholder="请输入单位名称"
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="单位简称">
            <el-input v-model="form.alias"
              placeholder="请输入单位简称"
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态"
            prop="status">
            <rk-select style="width: 100%;"
              v-model="form.status"
              :isSearch="false"
              placeholder="请选择状态"
              enum="UNIT_STATUS_ENUMS">
            </rk-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="单位类型"
            prop="zwdwlx">
            <RkTreeSelect style="width: 100%;"
              placeholder="请选择单位类型"
              :showCode="false"
              v-model="form.zwdwlx"
              :dist="{
                name: 'DSY_V_ELE_ZWDWLX'}"></RkTreeSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门分类">
            <rk-tree-select v-model="form.bmfl"
              placeholder="请选择部门分类"
              style="width: 100%;"
              :showCode="false"
              :dist="{
                name: 'DSY_V_ELE_BMFL'}">
            </rk-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="组织机构代码">
            <el-input v-model="form.orgcode"
              placeholder="请输入组织机构代码"
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码"
            prop="usccode">
            <el-input v-model="form.usccode"
              placeholder="请输入统一社会信用代码"
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="生效时间">
            <el-date-picker v-model="form.starttime"
              style="width: 100%"
              placeholder="请输入更新日期"
              valueFormat="YYYYMMDD"
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="失效时间">
            <el-date-picker v-model="form.endtime"
              style="width: 100%"
              placeholder="请输入更新日期"
              valueFormat="YYYYMMDD"
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="法人代表">
            <el-input v-model="form.frdb"
              placeholder="请输入法人代表" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财务负责人">
            <el-input v-model="form.cwfzr"
              placeholder="请输入财务负责人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="12">
          <el-form-item label="联系电话"
            prop="tel">
            <el-input v-model="form.tel"
              placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年度"
            prop="year">
            <el-date-picker v-model="form.year"
              style="width: 100%"
              type="year"
              placeholder="请选择年度"
              valueFormat="YYYY"
              clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input v-model="form.address"
              placeholder="请输入地址" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
 <script setup>

import { PHONE_NUMBER_REG, AGENCY_CRED_CODE_REG } from '@/common/cons-regular.js'
import XEUtils from 'xe-utils'
import { nextTick, reactive, ref } from 'vue'

let unitForm = reactive({
  adMdiv: undefined,
  superguid: undefined,
  guid: undefined,
  supdep: undefined,
  zgbmName: undefined,
  code: undefined,
  name: undefined,
  alias: undefined,
  status: '1',
  year: undefined,
  zwdwlx: undefined,
  bmfl: undefined,
  orgcode: undefined,
  usccode: undefined,
  starttime: '20220101',
  endtime: '20991231',
  frdb: undefined,
  cwfzr: undefined,
  tel: undefined,
  address: undefined,
  isleaf: undefined,
  levelno: 1
})
const treeParams = inject('treeParams')
const props = defineProps({
  unitModel: {
    type: Object,
    default: () => { }
  },
  model: {
    type: String,
    default: ''
  },
})

const unitFormRef = ref('')
let defaultParams = reactive({})
let form = ref({
  ...unitForm
})
const isUnit = ref(false)
const rules = reactive({
  supdep: [{ required: true, message: '请选择主管部门', trigger: 'change' }],
  name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  zwdwlx: [{ required: true, message: '请选择单位类型', trigger: 'change' }],
  tel: [{ pattern: PHONE_NUMBER_REG, message: '手机号不符合规范！', trigger: 'blur' }],
  year: [{ required: true, message: '请选择年度', trigger: 'change' }],
  usccode: [{ pattern: AGENCY_CRED_CODE_REG, message: '统一社会信用代码不符合规范！', trigger: 'blur' }]
},)
const controlZgbm = ref(false)
const codeState = ref(false)
const isEdit = ref(false)

onMounted(() => {
  handlerTopTreeType(treeParams)
})
const handlerTopTreeType = async (params) => {
  const { adCode, agCode, name, levelno, superguid, adMdiv } = params
  defaultParams = {
    name,
    adCode,
    agCode,
    levelno,
    superguid
  }
  unitForm.adMdiv = adMdiv
  unitForm.superguid = superguid
  if (adCode && adCode != '' && agCode == '') { // 区划
    unitForm.code = ''
    if (props.model == 'add') {
      unitForm.supdep = ''
      unitForm.supdep = ''
    }
  }
  if (agCode && agCode != '') { // 单位
    controlZgbm.value = true
    unitForm.code = params.code
    unitForm.levelno = levelno
    unitForm.supdep = params.supdep
  }
  form.value = {
    ...unitForm
  }
}
/** 修改表单数据回显 */
const loadForm = () => {
  const echoForm = props.unitModel
  let newFormData = {}
  for (let key in unitForm) {
    const newKey = (XEUtils.isNull(echoForm[key]) || XEUtils.isUndefined(echoForm[key])) ? unitForm[key] : echoForm[key]
    newFormData[key] = XEUtils.clone(newKey, true)
  }
  if (props.model == 'edit') {
    defaultParams.agCode = form.value.code
    codeState.value = true
    controlZgbm.value = true
    isEdit.value = true
    if (!echoForm.isleaf || echoForm.isleaf == undefined) {
      newFormData.isleaf = echoForm.isleaf
    }
  }
  form.value = {
    ...newFormData
  }
}
/** 获取表单数据 */
const getFormData = () => {
  let resultData = {}
  for (let key in form.value) {
    resultData[key] = Reflect.ownKeys(unitForm).includes(key) ? form.value[key] : ''
  }
  if (isUnit.value) { // 单位
  } else { // 区划
    resultData.agCode = undefined
  }
  return resultData
}
// //选择主管部门
// const handleZgbmChange = (value, label) => {
//   console.log(value, label)
//   let zgbmName = label.split(' ')[1]
//   defaultParams.agCode = value
//   form.value.zgbmName = zgbmName
// }
/** 重置表单 */
const resetForm = () => {
  unitFormRef.value.resetFields()
  unitFormRef.value.clearValidate()
  // 重新赋值
  form.value = XEUtils.clone(unitForm, true)
}

/** 表单校验 */
const validateForm = async () => {
  let resValid = false
  await unitFormRef.value.validate((valid, failCol) => {
    resValid = valid
  })
  return resValid
}
// 对外暴露方法
defineExpose({
  loadForm,
  resetForm,
  validateForm,
  getFormData,
})

  </script>
  <style lang="scss">
</style>